<template>
	<view>
		<view style="width:100%;">
			<u-tabs :list="tabs" current="1" lineWidth="40" @click="click"></u-tabs>
		</view>
		<view class="" v-if="rankingList.length == 0">
			暂无排名
		</view>
		<view class="list" v-for="(item,index) in rankingList" :key="item.userId">
			<view class="item">
				<!-- 排名 -->
				<view class="index">
					<image class="img" src="../../static/1.png" mode="" v-if="index == 0 "></image>
					<image class="img" src="../../static/2.png" mode="" v-else-if="index == 1 "></image>
					<image class="img" src="../../static/3.png" mode="" v-else-if="index == 2 "></image>
					<view v-else>
						{{index+1}}
					</view>
				</view>
				<!-- 头像 -->
				<view>
					<u-avatar :src="item.user.avatar" size="60"></u-avatar>
				</view>
				<!-- 内容 -->
				<view class="item-content">
					<!-- 昵称 -->
					<view class="" style="color: #5c5c5c;">
						{{item.user.nickName}}
					</view>
					<!-- 时间 -->
					<view class="" style="margin-top: 10rpx;color: #6f6f6f;">
						{{item.motion.runTime}}
					</view>
				</view>
			</view>
		</view>
		<navigator url="/subpages/mySport/mySport">
			<view class="bottom" style="text-align: center;color: #b1b6b5;font-size: 20rpx;">
				去公开跑步记录 >
			</view>
		</navigator>
		
	</view>
</template>

<script>
	import {
		rankingList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabs: [{
					name: '1公里',
					distance: 1
				}, {
					name: '3公里',
					distance: 3
				}, {
					name: '5公里',
					distance: 5
				}, {
					name: '10公里',
					distance: 10
				}, ],
				distance:3,
				rankingList:[]
			};
		},
		onLoad() {
			this.LoadRankingList(this.distance);
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.LoadRankingList(this.distance);
			// 加载完成后关闭加载动画
			uni.stopPullDownRefresh();
		},
		methods: {
			click(item) {
				this.distance = item.distance;
				this.LoadRankingList(this.distance);
			},
			async LoadRankingList(distance){
				const data = await rankingList(distance);
				if(data.code == 200){
					this.rankingList = data.rows;
					console.log(this.rankingList);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.item{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20rpx;
	.index{
		width: 50rpx;
		height: 50rpx;
		.img{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.item-content{
		margin-left: 20rpx;
	}
}
</style>
